<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
//这是在商品详情页，点击确认订单后跳转到订单页面，确认订单时的测试
<div id="app">
    <el-form ref="orderInfo" :model="orderInfo" label-width="80px">

        <el-form-item label="单号" prop="creator">
            <el-input v-model="orderInfo.id"></el-input>
        </el-form-item>

        <!--<el-form-item label="订单名称" prop="creator">-->
            <!--<el-input v-model="orderInfo.name"></el-input>-->
        <!--</el-form-item>-->

        <!--<el-form-item label="数量" prop="creator">-->
            <!--<el-input v-model="orderInfo.nb"></el-input>-->
        <!--</el-form-item>-->

        <el-form-item label="总价" prop="creator">
            <el-input v-model="orderInfo.total"></el-input>
        </el-form-item>

        <el-button type="primary" @click="onSubmit()">提交订单</el-button>
    </el-form>
</div>

<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            orderInfo:{}
        },
        methods:{
            onSubmit:function(){
                $.post("/cai/pay/payTest",app.orderInfo,function(backData){
                    if (backData.code== 1001) {
                            //查找到当前页面的body，将后台返回的data替换掉他的内容
                            document.querySelector('body').innerHTML = backData.data;
                            //执行submit表单提交，让页面重定向，跳转到支付宝页面
                            document.forms[0].submit();
                    }
                })
            }
        }
    });
</script>

</body>
</html>